<template>

  <div class="app-container">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1"><a href="#/base/user/info">用户信息</a></el-menu-item>
                <el-menu-item index="1-2"><a href="#/base/company/info">公司信息</a></el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item
              index="3"
              disabled
            >
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <el-card>
              <template v-slot:header>
                <span>{{ $t('route.base.user.info') }}</span>
                <span style="float: right;">
                  <apj-permission-table-action
                    @add="handleAdd"
                    @import="handleImportClick"
                    @export="handleExportClick"
                    @batchdelete="handleBatchdelete"
                    @hidecolumn="handleHidecolumnShow"
                  />
                  <el-button @click="handleAdd">新增</el-button>
                </span>
              </template>
              <el-table
                ref="table"
                :data="items"
                row-key="id"
                stripe
                highlight-current-row
                @selection-change="handleSelection"
              >
                <el-table-column
                  type="selection"
                  width="30px"
                />
                <el-table-column
                  prop="userName"
                  :label="$t('base.user.info.user_name')"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="aliseName"
                  :label="$t('base.user.info.alise_name')"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="company"
                  :label="$t('base.user.info.company')"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="remark"
                  :label="$t('base.user.info.remark')"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="img"
                  :label="$t('base.user.info.img')"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  :label="$t('common.option.action')"
                  prop="action"
                  fixed="right"
                >
                  <template slot-scope="{row}">
                    <apj-permission-table-action
                      @edit="handleEdit(row)"
                      @delete="handleDelete(row)"
                      @detail="handleDetail(row)"
                    />
                    <el-button
                      type="text"
                      size="small"
                      @click="handleEdit(row)"
                    >修改</el-button>
                    <el-button
                      type="text"
                      size="small"
                      @click="handleDelete(row)"
                    >删除</el-button>
                    <el-button
                      type="text"
                      size="small"
                      @click="handleDetail(row)"
                    >详情</el-button>

                  </template>
                </el-table-column>
              </el-table>
              <div class="interval-div" />
              <apj-pagination
                :total="total"
                @handleChange="handlePageChange"
              />
              <apj-table-hidecolumn ref="hidecolumn" />
              <apj-table-export
                ref="export"
                @confirm="handleExport"
              />
              <apj-table-import
                ref="import"
                :filename="$t('route.base.user.info')"
                :template="template"
                :confirm="handleImport"
              />
            </el-card>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
    <apj-searchable
      ref="searchable"
      :name="componentName"
      :show-advance="false"
      @search="handleSearch"
    />
    <div class="interval-div" />

  </div>
</template>

<script>
// import{ forkJoin } from 'rxjs'
// import* as InfoApi from '@/api/base/user/info'
// import* as DeleteApi from '@/api/delete'
// import{ formatDate } from '@/filters/time'
// import{ nullToEmpty } from '@/filters'
import axios from 'axios'
export default {
  name: 'BaseUserInfo',
  components: {},
  directives: {},
  filters: {
  },
  data() {
    return {
      componentName: this.$options.name,
      items: [],
      total: 0,
      query: { page: {}, sort: { prop: '', order: '' } },
      selection: []
    }
  },
  created() {
    this.initPage()
  },
  mounted() {
    this.$refs.export.init(this.$refs.table)
    this.$refs.hidecolumn.init(this.$refs.table, this.componentName)
  },
  methods: {
    initPage() {
      // 初始化页面
      const actionUrl = this.HOST + '/base/user/info/' + 'initPage'
      axios({
        url: actionUrl,
        method: 'post',
        params: { id: this.entityId }
      }).then(response => {
        // InfoApi.initPage({}).then(response => {
        this.loadGrid()
      })
    },
    loadGrid() {
      // 加载表格数据
      const query = Object.assign({}, this.query)
      const actionUrl = this.HOST + '/base/user/info/' + 'list'
      axios({
        url: actionUrl,
        method: 'post',
        params: { id: this.entityId }
      }).then(response => {
        // InfoApi.loadGrid(query).then(response => {
        const data = response.data
        this.items = data.items
        this.total = data.total
      })
    },
    handleSearch(search) {
      this.query.page = {}
      this.query.conditions = search.conditions
      this.loadGrid()
    },
    handlePageChange(page) {
      // 分页回调
      this.query.page = page
      this.loadGrid()
    },
    toEditPage(id) {
      this.$router.push({
        name: 'BaseUserInfoEditLink',
        query: { id: id }
      })
    },
    handleAdd() {
      this.toEditPage()
    },
    handleEdit(row) {
      this.toEditPage(row.id)
    },
    handleDetail(row) {
      this.$router.push({ name: 'BaseUserInfoDetailLink', query: { id: row.id } })
    },
    handleHidecolumnShow() {
      this.$refs.hidecolumn.show()
    },
    handleDelete(row) {
      const actionUrl = this.HOST + '/base/user/info/' + 'delete'
      axios({
        url: actionUrl,
        method: 'post',
        params: { id: row.id }
      }).then(response => {
        // DeleteApi.action({ name: this.componentName, ids: [row.id] }).then(() => {
        this.loadGrid()
      })
    },
    handleBatchdelete() {
      if (this.selection.length > 0) {
        const ids = this.selection.map(row => row.id)
        // DeleteApi.action({ name: this.componentName, ids: ids }).then(() => {
        //   this.loadGrid()
        //  })
      }
    },
    handleSelection(rows) {
      this.selection = rows
    },
    handleExport(data) {
      const { headers, propertys } = data
      const timename = formatDate(new Date())

      const query = Object.assign({}, this.query)
      query.page = { size: 10000, current: 1 }
    },
    handleExportClick() {
      this.$refs.export.show()
    },
    handleImportClick() {
      this.$refs.import.show()
    },
    handleImport(datas) {
      datas.forEach((row) => {
        // 增加、转换属性值
        // row.carnumprefix = ''
      })
    }
  }
}
</script>
